<template>
  <div id="buMenList">
    <el-card class="box-card"  style="height: 100%;">
      <div slot="header" class="clearfix" style="text-align: right">
        <el-button size="medium" type="goon" round @click="nenghaoDialogFormVisibleAddcp = true" style="" v-has="'addproduct'">新增产品</el-button>
      </div>
      <div class="serverTable" v-has="'seleceproduct'">
        <el-table
          :data="tableData"
          border
          height="100%"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            min-width="60"
          >
          </el-table-column>
          <el-table-column
            prop="productName"
            label="产品名称"
            min-width="20%"
          >
          </el-table-column>
          <el-table-column
            prop="indexName"
            label="指标名称"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            prop="indexUnit"
            label="指标单位"
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="admittanceValue"
            label="准入值"
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="estimateAmount"
            label="折标系数"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            prop="levelStandard"
            label="分级判断标准"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            prop="standardUnit"
            label="单位"
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="13%"
          >
            <template v-slot="scope">
              <el-tooltip effect="dark" content="修改产品" placement="top" :enterable="false" v-has="'addproduct'">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row.id)" ></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除产品" placement="top" :enterable="false" v-has="'addproduct'">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteMsg(scope.row.id)" ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog
      title="新增产品"
      :visible.sync="nenghaoDialogFormVisibleAddcp"
      :before-close="handleClose"
      @close="editdialogClose2"
      width="25%"
      center
    >
      <el-form ref="addCpFormRef" :model="addCpForm" label-width="140px" :rules="addFormRuleCp">
        <el-form-item label="产品名称" prop="productName">
          <el-input  v-model="addCpForm.productName" ></el-input>
        </el-form-item>
        <el-form-item label="指标名称" prop="indexName">
          <el-input  v-model="addCpForm.indexName" ></el-input>
        </el-form-item>
        <el-form-item label="指标单位" prop="indexUnit">
          <el-select v-model="addCpForm.indexUnit" filterable placeholder="请选择指标单位"  style="width: 98%" >
            <el-option
              v-for="item in zhibiaounitData"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="准入值" prop="admittanceValue">
          <el-input  v-model="addCpForm.admittanceValue" ></el-input>
        </el-form-item>
        <el-form-item label="折标系数" prop="estimateAmount">
          <el-select v-model="addCpForm.estimateAmount" filterable placeholder="请选择折标系数"  style="width: 98%" >
            <el-option
              v-for="item in zhebiaoData"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value}">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button round type="goon" size="medium" @click="nenghaoDialogFormVisibleAddcp = false">取 消</el-button>
    <el-button round type="goon" size="medium"  @click="addChanping" >确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="更新产品"
      :visible.sync="editdialogVisible"
      :before-close="handleClose"
      @close="editdialogClose"
      width="25%"
      center
    >
      <el-form ref="editFormRef" :model="editCpForm" label-width="140px" :rules="addFormRuleCp">
        <el-form-item label="产品名称" prop="productName">
          <el-input  v-model="editCpForm.productName" ></el-input>
        </el-form-item>
        <el-form-item label="指标名称" prop="indexName">
          <el-input  v-model="editCpForm.indexName" ></el-input>
        </el-form-item>
        <el-form-item label="指标单位" prop="indexUnit">
          <el-select v-model="editCpForm.indexUnit" filterable placeholder="请选择指标单位"  style="width: 98%" >
            <el-option
              v-for="item in zhibiaounitData"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="准入值" prop="admittanceValue">
          <el-input  v-model="editCpForm.admittanceValue" ></el-input>
        </el-form-item>
        <el-form-item label="折标系数" prop="estimateAmount">
          <el-select v-model="editCpForm.estimateAmount" filterable placeholder="请选择折标系数"  style="width: 98%" >
            <el-option
              v-for="item in zhebiaoData"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value}">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button round type="goon" size="medium" @click="editdialogVisible = false">取 消</el-button>
    <el-button round type="goon" size="medium"  @click="editpcInfo" >确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'nenghaomanage',
    data(){
      return{
        value:[],
        total:10,
        tableData:[],
        nenghaoDialogFormVisibleAddcp:false,
        addCpForm:{
          productName:'',
          indexName:'',
          indexUnit:'',
          admittanceValue:'',
          estimateAmount:'',
          levelStandard:5000,
          standardUnit:'吨标煤',
          serialNum:''
        },
        addFormRuleCp: {
          productName: [{
            required: true,
            message: '请输入产品名称',
            trigger: 'blur'
          }],
          indexName: [{
            required: true,
            message: '请输入指标名称',
            trigger: 'blur'
          }],
          indexUnit: [{
            required: true,
            message: '请选择指标单位',
            trigger: 'blur'
          }],
          estimateAmount: [{
            required: true,
            message: '请选择折标系数',
            trigger: 'blur'
          }],
          admittanceValue: [{
            required: true,
            message: '请输入准入值',
            trigger: 'blur'
          }],
        },
        editdialogVisible:false,
        editCpForm:{
        },
        zhibiaounitData:[{
          value: '克/千瓦时',
          label: '克/千瓦时'
        },{
          value: '千克/吉焦',
          label: '千克/吉焦'
        },{
          value: '千克/吨',
          label: '千克/吨'
        },{
          value: '千克/立方米',
          label: '千克/立方米'
        }],
        zhebiaoData:[{
          value: '1000',
          label: '1000'
        },{
          value: '1000000',
          label: '1000000'
        }],
      }
    },
    created () {
      this.getAllproduct();
    },
    methods:{
      async getAllproduct(){
        const {data:result}= await this.$http.get('/v1.0/resultIntegration/rule/admittanceValue/findAll')
        if(result.status=='3000'){
          this.tableData=result.data
        }else {
          this.tableData=[]
        }

      },
      async addChanping(){
        this.$refs.addCpFormRef.validate(async valid =>{
          if(!valid)
            return
          this.addCpForm.estimateAmount=this.addCpForm.estimateAmount.value
          this.addCpForm.indexUnit=this.addCpForm.indexUnit.value
          this.addCpForm.serialNum=this.addCpForm.indexUnit.substring(this.addCpForm.indexUnit.lastIndexOf("/")+1);
          console.log(this.addCpForm)
          const {data:res}= await this.$http.post('/v1.0/resultIntegration/rule/admittanceValue/save',this.addCpForm);
          if(res.status=='6000'){
            this.$message.success('新增产品成功！')
            this.getAllproduct()
            this.nenghaoDialogFormVisibleAddcp=false;
          }else {
            this.$message.error('新增产品失败！'+res.message)
          }
        })
      },
      async editDialog(id){
        const {data:res}=await  this.$http.get('/v1.0/resultIntegration/rule/admittanceValue/findById/'+id);
        if(res.status!=="3000"){
          return 0;
        }
        this.editCpForm=res.data;
        this.editdialogVisible = true
      },
      editdialogClose(){
        this.$refs.editFormRef.resetFields()
      },
      editpcInfo(){
        this.$refs.editFormRef.validate(async valid =>{
          if(!valid) return
          this.editCpForm.estimateAmount=this.editCpForm.estimateAmount.value;
          this.editCpForm.indexUnit=this.editCpForm.indexUnit.value;
          const {data:res}= await this.$http.put('/v1.0/resultIntegration/rule/admittanceValue/update', this.editCpForm)
          if(res.status!=="6000"){
            return  this.$message.error('修改产品失败！')
          }
          this.$message.success('修改产品成功！');
          this.editdialogVisible = false;
          this.getAllproduct();
        })
      },
      async deleteMsg(id){
        const confirmResult = await this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => {
          return err
        });
        if(confirmResult !== 'confirm'){
          return this.$message({
            type: 'info',
            message: '已取消删除'
          });
        }
        //请求
        const {data:res}= await this.$http.delete('/v1.0/resultIntegration/rule/admittanceValue/delete/'+id)
        if(res.status!="4000"){
          return  this.$message.error('删除产品失败！')
        }
        this.$message.success('删除产品成功！');
        this.getAllproduct();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      editdialogClose2(){
        this.$refs.addCpFormRef.resetFields()
      },
    }
  }
</script>

<style scoped lang="less">
  #buMenList{
    position: absolute;
    left: 15.5%;
    top: 9.5%;
    bottom: 1.5%;
    width: 83.5%;
    /*background-color: #ffffff;*/
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  ::v-deep .cell{
    text-align: center;
  }
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  .el-row{
    ::v-deep  .el-input__inner{
      border-radius: 45px;
    }

  }
  .clearfix{
    ::v-deep .el-button:focus, .el-button:hover {
      color: #fff;
      border-color: #c6e2ff;
      background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
    }
    ::v-deep .el-button--goon:active {
      color: #fff;
      border-color: #c6e2ff;
      outline: 0;
    }
  }

  /deep/ .el-input-group__append{
    border-radius: 45px;
  }
  /deep/ .el-dialog{
    border-radius: 8px;
  }
  /deep/ .el-dialog__header {
    //background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);

    border-radius: 8px 8px 0 0 ;
  }

  ::v-deep .el-button--goon:focus, .el-button--goon:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
  ::v-deep .el-dialog__title{
    font-weight: bold;
    font-size: 20px;
    color: #45524f;
  }
  .el-dialog__body{
    .el-form{
      .el-form-item {
        .el-form-item__content{
          .el-input{
            ::v-deep  .el-input__inner{
              border-radius: 45px;
            }
          }

        }
      }
    }
  }
  /deep/ .el-select .el-input__inner{
    border-radius: 45px;
  }

  ::v-deep .el-form-item__content{
    ::v-deep  .el-input__inner{
      border-radius: 45px;
    }
  }
  ::v-deep .el-form-item__label{
    color: #45524f;
  }
  .serverTable{
    position: absolute;
    width: 97%;
    padding: 0%;
    /*height: 100%;*/
    height: calc(100% - 140px);
  }
  /deep/ .cell{
    text-align: center;
  }
  /deep/ .el-table__empty-text{
    line-height:44px
  }
  /deep/ .el-table__empty-block{
    min-height: 44px;
  }
  /deep/ .el-table__body-wrapper {
    /*height: 200px; !* 滚动条整体高 必须项 *!*/
    border-right: none;
    overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
  }
  /deep/ .el-dialog--center .el-dialog__body{
    padding: 10px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width:6px;/* 滚动条的宽高 必须项 */
    height: 5px;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #bfcbd9;/* 滚动条的宽 */
    border-radius: 3px;
  }
  /deep/ .el-input__inner{
    border-radius: 45px;
  }
</style>
